<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Map</title>
    <!-- link rel="stylesheet" href="http://jasonpstewart.dyndns.org/olmapstyle.css" type="text/css" /-->
    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key={{ GOOGLE_API_KEY }}" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
    
        function init()
        {
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                numZoomLevels: 18,
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34)
            };
            
            // The Map
            map = new OpenLayers.Map('map', options);  // Google projection breaks wms...
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
            //map.addControl( new OpenLayers.Control.PanZoomBar() );
    
            // Base Layers
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            var google = new OpenLayers.Layer.Google("Google Hybrid" , {type: G_HYBRID_MAP, 'sphericalMercator': true } );
            var gstreets = new OpenLayers.Layer.Google("Google Streets", {'sphericalMercator': true} );
            var osm = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap");
            map.addLayers([google, gstreets, osm, wms]);
    
            // The KML Vector Layer(s)
            {% if route_list %}
                {% for i in route_list %}
                    map.addLayer(new OpenLayers.Layer.GML("{{ i.title }}", "{% url route-kml i.pk %}", 
                    {
                        projection: map.displayProjection,
                        format: OpenLayers.Format.KML, 
                        formatOptions: {
                          extractStyles: true, 
                          extractAttributes: true
                        }
                    }));
                {% endfor %}
            {% endif %}
            {% if area_list %}
                {% for i in area_list %}
                    map.addLayer(new OpenLayers.Layer.GML("{{ i.title }}", "{% url area-kml i.pk %}", 
                    {
                        projection: map.displayProjection,
                        format: OpenLayers.Format.KML, 
                        formatOptions: {
                          extractStyles: true, 
                          extractAttributes: true
                        }
                    }));
                {% endfor %}
            {% endif %}
            {% if photo_list %}
                {% for i in photo_list %}
                    map.addLayer(new OpenLayers.Layer.GML("{{ i.title }}", "{% url photo-kml i.pk %}", 
                    {
                        projection: map.displayProjection,
                        format: OpenLayers.Format.KML, 
                        formatOptions: {
                          extractStyles: true, 
                          extractAttributes: true
                        }
                    }));
                {% endfor %}
            {% endif %}
            {% if poi_list %}
                {% for i in poi_list %}
                    map.addLayer(new OpenLayers.Layer.GML("{{ i.title }}", "{% url poi-kml i.pk %}", 
                    {
                        projection: map.displayProjection,
                        format: OpenLayers.Format.KML, 
                        formatOptions: {
                          extractStyles: true, 
                          extractAttributes: true
                        }
                    }));
                {% endfor %}
            {% endif %}
            
    
            var bounds = OpenLayers.Bounds.fromString("{{ bounds.x1}}, {{ bounds.y1 }}, {{ bounds.x2 }}, {{ bounds.y2 }}");
            map.zoomToExtent(bounds.transform(map.displayProjection, map.projection), {closest: true});
        }
    </script>
<style type="text/css">
html, body {
	height: 100%;
	}
body {
	margin: 0;
	padding: 0;
	}
#map {
	padding: 10px;
        height: 100%;
        width: 100%;
        }
</style>
<!--[if lte IE 6]>
<style type="text/css">
#map {
	height: 100%;
	}
</style>
<![endif]-->
</head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>
